<template>
  <div id="useOfInformation">
    <div class="row_01">
      <Rate :info="rate_info01" />
      <Rate :info="rate_info02" />
      <Rate :info="rate_info03" />
      <Rate :info="rate_info04" />
    </div>
    <div class="row_02">
      <div class="left">
        <Header title="政策制度和工作动态数量-按发布时间统计" />
        <div class="chart_box">
          <Chart id="chart_bar" :message="optionsBar" />
        </div>
      </div>
      <div class="left">
        <Header title="共享信息使用情况-按信息栏目统计" />
        <div class="chart_box">
          <Chart id="chart_par" :message="optionsPar" />
        </div>
      </div>
      <div class="right">
        <Header title="政策制度和工作动态数量-按学科领域统计" />
        <div class="chart_box">
          <Chart id="chart_stack" :message="optionsStack" />
        </div>
      </div>
    </div>
    <div class="row_03">
      <div class="left">
        <Header title="共享信息使用情况-按浏览量和收藏量统计" />
        <div class="chart_box">
          <Chart id="chart_line01" :message="optionsLine01" />
        </div>
      </div>
      <div class="right">
        <Header title="共享信息使用情况-按点击时间统计" />
        <div class="chart_box">
          <Chart id="chart_line02" :message="optionsLine02" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "./Header.vue";
import Rate from "./Rate.vue";
import Chart from "@/components/echart/charts.vue";
import * as echarts from "echarts";
export default {
  name: "UseOfInformation",
  components: {
    Rate,
    Header,
    Chart,
  },
  data() {
    return {
      rate_info01: {
        title: "政策法规总数",
        num: "1220",
        increase: "32",
        decrease: "12",
      },
      rate_info02: {
        title: "工作动态总数",
        num: "1431",
        increase: "12",
        decrease: "26",
      },
      rate_info03: {
        title: "信息总浏览量",
        num: "26930",
        increase: "7",
        decrease: "2",
      },
      rate_info04: {
        title: "信息总收藏数",
        num: "8513",
        increase: "11",
        decrease: "16",
      },
      optionsBar: {
        legend: {
          icon: "circle",
          // orient: "vertical",
          top: "bottom",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
          textStyle: {
            color: "#fff",
          },
          className: "LineChart-tooltip",
          extraCssText: `background-color: rgba(0, 21, 50, 0.8);
            color: #fff;
            border: 0.01rem solid #214D87;
            border-color: #214D87;
            box-shadow: 0px 0px 0.08rem 0px rgba(0, 0, 0, 0.3);
            border-radius: 0.04rem;`,
          formatter: function (params) {
            // console.log(params);
            var html = params[0].name + "<br/>";
            for (var i = 0; i < params.length; i++) {
              html +=
                params[i].marker +
                params[i].seriesName +
                "  " +
                params[i].value +
                "件" +
                "<br/>";
            }
            return html;
          },
        },
        grid: {
          left: "3%",
          right: "12%",
          top: "15%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          name: "发布机构",
          nameTextStyle: {
            color: "#fff ",
          },
          type: "category",
          nameLocation: "end",
          axisLabel: {
            color: "#fff",
            fontSize: 10,
          },
          data: ["陆军机关", "海军机关", "空军机关", "火箭军机关"],
        },
        yAxis: [
          {
            name: "数量",
            nameTextStyle: {
              color: "#fff ",
            },
            type: "value",
            axisLabel: {
              color: "#fff",
            },
            splitLine: {
              lineStyle: {
                color: "#204F8C",
                type: "dashed", //虚线
              },
              show: true, //隐藏
            },
          },
        ],

        series: [
          {
            name: "政策制度",
            color: ["#61a5e8"],
            data: [10, 20, 5, 23],
            type: "bar",
            itemStyle: {
              //本月阻拦请求次数的数据渐变色设置，本章重点部分
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#96BAFF" }, //开始的颜色
                { offset: 1, color: "#3260F0" }, //结束的颜色
              ]), //中间可以设置多个数值，0 为百分之0 所以可以按照自己的想法，百分之10一个颜色变化都可。
            },
          },
          {
            name: "工作动态",
            color: ["#7ecf51"],
            data: [12, 23, 7, 13],
            type: "bar",
            itemStyle: {
              //本月阻拦请求次数的数据渐变色设置，本章重点部分
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#9AFEA5" }, //开始的颜色
                { offset: 1, color: "#5AD8A6" }, //结束的颜色
              ]), //中间可以设置多个数值，0 为百分之0 所以可以按照自己的想法，百分之10一个颜色变化都可。
            },
          },
        ],
      },
      optionsStack: {
        legend: {
          icon: "circle",
          // orient: "vertical",
          top: "bottom",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          name: "领域",
          nameTextStyle: {
            color: "#fff ",
          },
          axisLabel: {
            color: "#fff",
            fontSize: 10,
            formatter: function (value) {
              var texts = value;
              if (texts.length > 4) {
                // 限制长度自设
                texts = texts.substr(0, 4) + "...";
              }
              return texts;
            },
          },
          grid: {
            left: "3%",
            right: "16%",
            top: "15%",
            bottom: "10%",
            containLabel: true,
          },
          type: "category",
          boundaryGap: false,
          data: [
            "材料学",
            "化学",
            "生物学",
            "基础医学",
            "环境科学",
            "药学",
            "电子与通信技术",
            "机械工作",
            "地球科学",
            "其他10类",
          ],
        },
        yAxis: [
          {
            type: "value",
            name: "共享服务数量",
            axisLabel: {
              color: "#B5C5D4",
            },
            splitLine: {
              lineStyle: {
                color: "#204F8C",
                type: "dashed", //虚线
              },
              show: true, //隐藏
            },
            nameTextStyle: {
              color: "#fff ",
            },
          },
          {
            type: "value",
            name: "共享服务收入",
            axisLabel: {
              color: "#B5C5D4",
            },
            nameTextStyle: {
              color: "#fff ",
            },
          },
        ],
        series: [
          {
            name: "共享服务数量",
            color: ["#41AAFF"],
            data: [10, 23, 20, 5, 23, 12, 45, 21, 14, 8],
            type: "line",
            smooth: true,
            areaStyle: {
              // 使用方法二的写法
              color: {
                type: "linear",
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(58,189,255,0.1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(58,189,255,0)", // 100% 处的颜色
                  },
                ],
              },
            },
          },
          {
            name: "共享服务收入",
            color: "#FFD100",
            data: [20, 22, 12, 14, 9, 20, 10, 14, 8, 14],
            type: "line",
            smooth: true,
            areaStyle: {
              // 使用方法二的写法
              color: {
                type: "linear",
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(58,189,255,0.1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(58,189,255,0)", // 100% 处的颜色
                  },
                ],
              },
            },
          },
        ],
      },
      optionsPar: {
        tooltip: {
          trigger: "item",
        },
        legend: {
          icon: "circle",
          orient: "vertical",
          left: "56%",
          top: "middle",
          textStyle: {
            color: "#fff",
            rich: {
              a: {
                fontSize: 16,
                color: "#000",
              },
              b: {
                fontSize: 16,
                color: "#aeaeae",
                padding: [0, 7, 0, 7],
              },
            },
          },
        },
        series: [
          {
            left: "12%",
            width: 200,
            type: "pie",
            data: [
              { value: 20, name: "分析仪器" },
              { value: 20, name: "工艺试验仪器" },
              { value: 40, name: "物理性能测试仪器" },
              { value: 30, name: "电子测量仪器" },
              { value: 42, name: "计量仪器" },
              { value: 25, name: "医学科研仪器" },
              { value: 22, name: "地球探测仪器" },
              { value: 15, name: "特种检测仪器" },
              { value: 48, name: "海洋仪器" },
              { value: 16, name: "激光器" },
              { value: 40, name: "其他" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: (list) => {
                  // 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
                  var colorList = [
                    {
                      colorStart: "#FFF5B6",
                      colorEnd: "#DFC338",
                    },
                    {
                      colorStart: "#9AFEA5",
                      colorEnd: "#5AD8A6",
                    },
                    {
                      colorStart: "#96BAFF",
                      colorEnd: "#3260F0",
                    },
                    {
                      colorStart: "#FD9494",
                      colorEnd: "#ED5656",
                    },
                    {
                      colorStart: "#CC9AFE",
                      colorEnd: "#A455F2",
                    },
                    {
                      colorStart: "#FFF5B6",
                      colorEnd: "#DFC338",
                    },
                    {
                      colorStart: "#9AFEA5",
                      colorEnd: "#5AD8A6",
                    },
                    {
                      colorStart: "#96BAFF",
                      colorEnd: "#3260F0",
                    },
                    {
                      colorStart: "#FD9494",
                      colorEnd: "#ED5656",
                    },
                    {
                      colorStart: "#CC9AFE",
                      colorEnd: "#A455F2",
                    },
                    {
                      colorStart: "#FFF5B6",
                      colorEnd: "#DFC338",
                    },
                    {
                      colorStart: "#9AFEA5",
                      colorEnd: "#5AD8A6",
                    },
                    {
                      colorStart: "#96BAFF",
                      colorEnd: "#3260F0",
                    },
                    {
                      colorStart: "#FD9494",
                      colorEnd: "#ED5656",
                    },
                    {
                      colorStart: "#CC9AFE",
                      colorEnd: "#A455F2",
                    },
                  ];
                  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      //左、下、右、上
                      offset: 0,
                      color: colorList[list.dataIndex]["colorStart"],
                    },
                    {
                      offset: 1,
                      color: colorList[list.dataIndex]["colorEnd"],
                    },
                  ]);
                },
              },
            },
          },
        ],
      },
      optionsLine01: {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "5%",
          right: "5%",
          top: "15%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          name: "月份",
          nameTextStyle: {
            color: "#fff ",
          },
          type: "category",
          axisLabel: {
            color: "#fff",
            fontSize: 12,
          },
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          name: "数量",
          type: "value",
          nameTextStyle: {
            color: "#fff ",
          },
          axisLabel: {
            color: "#B5C5D4",
          },
          splitLine: {
            lineStyle: {
              color: "#204F8C",
              type: "dashed", //虚线
            },
            show: true, //隐藏
          },
        },
        series: [
          {
            name: "浏览量",
            color: ["#41AAFF"],
            data: [25, 20, 30, 22, 31, 25, 35, 13, 10, 22, 25, 13],
            type: "line",
            itemStyle: {
              //本月阻拦请求次数的数据渐变色设置，本章重点部分
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#FFF5B6" }, //开始的颜色
                { offset: 1, color: "#DFC338" }, //结束的颜色
              ]), //中间可以设置多个数值，0 为百分之0 所以可以按照自己的想法，百分之10一个颜色变化都可。
            },
          },
          {
            name: "收藏量",
            color: ["#a3da84"],
            data: [18, 12, 25, 19, 17, 23, 5, 8, 2, 7, 9, 36],
            type: "line",
          },
        ],
      },
      optionsLine02: {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "5%",
          right: "8%",
          top: "15%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          name: "点击时间",
          nameTextStyle: {
            color: "#fff",
          },
          type: "category",
          axisLabel: {
            color: "#fff",
            fontSize: 12,
          },
          data: [
            "01/01",
            "01/02",
            "01/03",
            "01/04",
            "01/05",
            "01/06",
            "01/07",
            "01/08",
            "01/09",
            "01/10",
            "01/11",
            "01/12",
            "01/13",
            "01/14",
            "01/15",
            "01/16",
            "01/17",
          ],
        },
        yAxis: {
          name: "点击量",
          type: "value",
          nameTextStyle: {
            color: "#fff ",
          },
          axisLabel: {
            color: "#B5C5D4",
          },
          splitLine: {
            lineStyle: {
              color: "#204F8C",
              type: "dashed", //虚线
            },
            show: true, //隐藏
          },
        },
        series: [
          {
            name: "平均值",
            color: ["#61a5e8"],
            data: [
              10, 20, 5, 23, 12, 45, 21, 14, 8, 12, 4, 6, 9, 8, 12, 15, 17,
            ],
            type: "line",
            itemStyle: {
              //本月阻拦请求次数的数据渐变色设置，本章重点部分
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#96BAFF" }, //开始的颜色
                { offset: 1, color: "#3260F0" }, //结束的颜色
              ]), //中间可以设置多个数值，0 为百分之0 所以可以按照自己的想法，百分之10一个颜色变化都可。
            },
          },
        ],
      },
    };
  },
};
</script>

<style lang="less" scoped>
.chart_box {
  height: 80%;
}
#useOfInformation {
  display: grid;
  grid-template-columns: 3fr 7fr;
  grid-template-rows: 50px calc((100vh - 156px) / 2) calc((100vh - 145px) / 2) 0;
  grid-gap: 10px;
  .row_01 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    display: flex;
    & > div:nth-of-type(1) {
      margin-right: 15px;
    }
    & > div:nth-of-type(2) {
      margin-right: 15px;
    }
    & > div:nth-of-type(3) {
      margin-right: 15px;
    }
  }
  .row_02 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    display: flex;
    justify-content: space-around;
    & > div {
      width: calc(100% / 3);
      background: linear-gradient(180deg, #061234 0%, #093964 100%);
      display: flex;
      flex-direction: column;
      .chart_box {
        flex: 1;
      }
    }
    .left {
      margin-right: 15px;
    }
  }
  .row_03 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
    display: flex;
    justify-content: space-around;
    & > div {
      width: 50%;
      background: linear-gradient(180deg, #061234 0%, #093964 100%);
      display: flex;
      flex-direction: column;
      .chart_box {
        flex: 1;
      }
    }
    .left {
      margin-right: 15px;
    }
  }
}
</style>
